import "./ComponentCardGroup.scss";
import { Icon } from "@iconify-icon/react";
function ComponentCardGroup({ items }) {
  console.log(items);
  // 拖拽开始
  const handleDragStart=(e,data)=>{
    e.dataTransfer.setData("dragData",JSON.stringify(data))
  }

  return (
    <Flex vertical={true} gap={20}>
      {items.map((item) => (
        <div key={item.key} 
        onDragStart={(e)=>handleDragStart(e,item)}className="lego-container-componetGroup-item" draggable={true}>
          <div className="item-title">{item.label}</div>
          <div className="item-cover">
            <Icon icon={item.icon}></Icon>
          </div>
        </div>
      ))}
    </Flex>
  );
}
export default ComponentCardGroup;
